<script setup lang="ts">
import { computed } from 'vue'
import { LogoutOutlined, LockOutlined } from '@ant-design/icons-vue'

const messageApi = useMessage()
const userStore = useUserStore()
const multiTabStore = useMultiTab()
const layoutMenuStore = useLayoutMenu()
const router = useRouter()
const { userInfo } = storeToRefs(userStore)
const userName = computed(() => {
  // 优先从 userStore 获取
  if (userInfo.value?.username || userInfo.value?.nickname) {
    return userInfo.value?.username || userInfo.value?.nickname
  }
  // 如果 userStore 中没有，从 localStorage 获取
  const userInfoStr = localStorage.getItem('userInfo')
  if (userInfoStr) {
    try {
      const localUserInfo = JSON.parse(userInfoStr)
      return localUserInfo.userName || ''
    }
    catch (e) {
      return ''
    }
  }
  return ''
})

// 获取姓氏首字符
const userInitial = computed(() => {
  const name = userName.value
  if (!name || name === '')
    return '-'
  // 取第一个字符
  return name.slice(0, 1).toUpperCase()
})

async function handleClick({ key }: any) {
  if (key === 'logout') {
    const hide = messageApi.loading('退出登录...', 0)
    try {
      await userStore.logout()
    }
    finally {
      hide()
      messageApi.success('退出登录成功', 3)
      router.push({
        path: '/login',
      }).then(() => {
        multiTabStore.clear()
        layoutMenuStore.clear()
      })
    }
  }
  else if (key === 'changePassword') {
    router.push({
      path: '/profile/change-password',
    })
  }
}
</script>

<template>
  <a-dropdown>
    <span flex items-center h-48px px-12px cursor-pointer class="transition-all-300">
      <div class="user-avatar-circle" mr-8px>
        {{ userInitial }}
      </div>
      <div flex flex-col>
        <span
          style="color: white;"
          class="anticon text-15px"
        >欢迎您， {{ userName }}</span>
      </div>
    </span>
    <template #overlay>
      <a-menu
        style="
      background-color: #457fad;
      position:relative;
      top:-2px;
      left:14px;
      padding: 5px 0px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      "
        @click="handleClick"
      >
        <!-- <a-menu-item key="0">
          <template #icon>
            <UserOutlined />
          </template>
          <RouterLink
           to="/account/center">
            个人中心
          </RouterLink>
        </a-menu-item>
        <a-menu-item key="1">
          <template #icon>
            <ProfileOutlined />
          </template>
          <RouterLink to="/account/settings">
            个人设置
          </RouterLink>
        </a-menu-item> -->
        <a-menu-item
          key="changePassword"
          style="
        background-color: #457fad;
        font-size: 14px;
        color:white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        "
        >
          <template #icon>
            <span
              style="
              position:relative;
              top:4px;
              left:2px;
              color:white;
              font-size: 14px;
              "
            >
              <LockOutlined
                style="
                position:relative;
                top:-4px;
              font-size: 15px;
              "
              />
            </span>
          </template>
          <span
            style="
          position:relative;
          top:0px;
          left:2px;
          font-size:15px;
        color:white;
          opacity: 0.99;
          "
          >
            修改密码
          </span>
        </a-menu-item>
        <a-menu-item
          key="logout"
          style="
        background-color: #457fad;
        font-size: 14px;
        color:white;
        "
        >
          <template #icon>
            <span
              style="
              position:relative;
              top:4px;
              left:2px;
              color:white;
              font-size: 14px;
              "
            >
              <LogoutOutlined
                style="
                position:relative;
                top:-4px;
              font-size: 15px;
              "
              />
            </span>
          </template>
          <span
            style="
          position:relative;
          top:0px;
          left:2px;
          font-size:15px;
        color:white;
          opacity: 0.99;
          "
          >
            退出登录
          </span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<style scoped lang="less">
.user-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1c446b, #2b6da6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
</style>
